<template>
	<view class="daylist">
		<custom-head-top>
			<template #left>
				每日推荐
			</template>
			
			<template #right>
				<view class="isChecked">
					<text>全部启用</text>
					<switch :checked="dayChecked" class="switchStyle" @change="dayChange" />
				</view>
			</template>
		</custom-head-top>
		<view class="grid">
			<view class="item add" @click="routerTo('/pages/activity/dayadd')">
				+
			</view>
			<view class="item" v-for="item in dayList" :key="item._id">
				<DayItem :item @removeSuccess="getDays()"></DayItem>
			</view>
		</view>
		<view class=".paginate">
			<uni-pagination :current="params.current" :total="params.total"
			:page-size="params.size"  :show-icon="true" @change="pageChange" />
		</view>
	</view>
</template>

<script setup>
import DayItem from "./children/DayItem.vue";
import { routerTo, showToast } from "../../utils/common";
import { ref } from "vue";
const dayCloudObj = uniCloud.importObject("admin-activity-everyday");

const dayChecked = ref(true);
const dayList = ref([]);
const params = ref({
	current: 1,
	size: 5,
	total: 0
});


//全局监听事件
uni.$on("daySuccess", () => {
	getDays();
})


//获取每日推荐列表
const getDays = async() => {
	let {errCode, data, count} = await dayCloudObj.list(params.value);
	dayList.value = data;
	params.value.total = count;
	dayChecked.value = dayList.value.some(item=>item && item.checked)
}

//分页切换
const pageChange = (e) => {
	params.value.current = e.current;
	getDays();
}

//全局状态修改
const dayChange = async(e) => {
	let {errCode} = await dayCloudObj.updateCheck(e.detail.value)
	if(errCode!==0) return showToast({title:"请重试"})
	showToast({title:"修改成功"})
	getDays();
}

getDays();

uni.$on("daySuccess", (data) => {
	console.log(data);
});
</script>

<style lang="scss" scoped>
	.daylist {
		
		.isChecked{
			display: flex;
			align-items: center;
			text {
				font-size: 14px;
				color: #888;
				margin-right: 10px;
			}
		}
		
		.grid {
			padding: 20px;
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
			gap: 30px;

			.item {
				border: 1px, solid #efefef;
				background: #fff;
				border-radius: 8px;
				min-height: 200px;
				overflow: hidden;
			}


			.item.add {
				background-color: #F8F8F8;
				font-size: 50px;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #999;
				cursor: pointer;
			}

			.item:hover {
				border-color: #e0e0e0;
			}
		}
	}
</style>